<template>
  <div class="flex-row autoGrow replyContainer">
    <div class="settingOption flex-column">
      <div class="subTitle">标签设置</div>
        <div class="flex-row">
          <el-input
            type="textarea"
            :autosize="{ minRows: 8}"
            placeholder="请输入微信ID,以逗号分隔"
            v-model="wxUserToBlock"
          ></el-input>
        </div>
        <div class="flex-row">
          <el-button type="primary" @click="addUserToBlock">加入黑名单</el-button>
        </div>
    </div>
    <div class="settingOption flex-column">
      <div class="subTitle"></div>
      <div class="option flex-row"></div>
    </div>
    <div class="welcomeList flex-column autoGrow">
      <div class="subTitle">黑名单</div>
      <div class="listContainer autoGrow">
        <el-table :data="wxUserBlocked" style="width: 100%">
          <el-table-column prop="nickname" label="微信ID"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  name: "groupBlacklist",
  data() {
    return {
      wxUserToBlock: "", // 待添加黑名单
      wxUserBlocked: [] // 黑名单
    };
  },
  components: {},
  mounted() {
    console.log("test");
    this.$api.group
      .groupBlacklist({
        csid: this.currentService.csid
      })
      .then(data => {
        this.wxUserBlocked = data;
      })
      .catch(e => this.$msg(e));
  },
  methods: {
    addUserToBlock(){
      if(!this.wxUserToBlock || this.wxUserToBlock === ''){
        this.$message({
          message: '请输入微信ID',
          type: 'warning'
        });
        return
      }
      this.$api.group
      .addBlacklist({
        csid: this.currentService.csid,
        userList: this.wxUserToBlock
      })
      .then(data => {
        for(let item of data){
          this.wxUserBlocked.unshift(item)
        }
        
        this.wxUserToBlock = '';
        this.$message({
          message: '操作成功',
          type: 'success'
        });
      })
      .catch(e => this.$msg(e)); 
    }
  },
  computed: {
    ...mapState(["currentService"])
  },
  watch: {}
};
</script>
<style scoped>
.listItem {
  flex: 0 0 33%;
}
</style>